<template>
  <view class="personal-card">
    <view class="personal-left">
      <image class="personal-img" :src="information.avatar"></image>
    </view>
    <view class="personal-right">
      <view class="personal-name">{{ information.realName }}</view>
      <view class="personal-honor" v-if="information.userHonorList">
        <text
          class="honor-card"
          v-for="item in information.userHonorList"
          :key="item.id"
        >
          {{ item.userHonor }}
        </text>
      </view>
      <view class="personal-introduce">
        <text class="integral">权益分:{{ information.integral }} </text>
        <text class="company" v-if="information.enterpriseName !=='暂无'">TA在{{ information.enterpriseName }} </text>
      </view>
      <slot name="btn"></slot>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  information: {
    type: Object,
  },
});
</script>

<style lang="less" scoped>
.personal-card {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  // margin-bottom: 50rpx;
  border-bottom: 1rpx solid #27263663;
  padding-bottom: 50rpx;
  .personal-left {
    width: 80rpx;
    margin-right: 30rpx;
    .personal-img {
      width: 78rpx;
      height: 78rpx;
    }
  }
  .personal-right {
    width: 80vw;
    .personal-name {
      font-family: "ali-b";
      font-weight: 500;
      font-size: 31rpx;
      color: #272636;
      height: 70rpx;
    }
    .personal-honor {
        min-height: 40rpx;
      .honor-card {
        display: inline-block;
        padding: 5rpx 15rpx;
        border: 1rpx solid #5590f6;
        border-radius: 3rpx;
        font-family: "ali";
        font-weight: 400;
        font-size: 20rpx;
        color: #5590f6;
        margin: 5rpx 10rpx;
        &:nth-child(1) {
          margin: 5rpx 0;
        }
      }
    }
    .personal-introduce {
      font-family: "ali";
      font-weight: 400;
      font-size: 23rpx;
      color: #9b9b9b;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      .company {
        width: 70%;
      }
    }
  }
}
</style>